<template>
  <div>
    <div style="font-size: 30px">共{{this.courses.length}}个课程</div>
    <div style="font-size: 30px">今天</div>
    <div style="height: 30px"></div>
    <ul class="course_type_list">
      <li  v-for="coursestart in coursetoday ">
        <div class="box">
          <img src="../../assets/img/demo.png" alt="">
          <div class="info">
            <h4><a href="#">{{coursestart.name}}</a></h4>
            <span class="duration">共{{ Math.abs(Math.ceil((Date.parse(coursestart.end)-Date.parse(coursestart.start))/1000/60/60/24/7)) }}周</span>
          </div>
          <div class="tinfo">
            <ul class="nav_horizontal">
              <li class="uimg">
                <img src="../../assets/img/demo.png" alt="">
              </li>
              <li class="username">{{coursestart.teacher.nickname}}</li>
            </ul>
          </div>
          <hr>
<!--          <div class="dinfo">
            <span class="time">距开始还有</span>
            <span style="color: red;font-size: large">{{ Math.ceil((Date.parse(coursestart.start)-new Date())/1000/60/60/24) }}天</span>
          </div>-->
          <div class="tinfo">
            <ul class="nav_horizontal">
              <li class="visitedicon"><font-awesome-icon :icon="['far', 'eye']"></font-awesome-icon></li>
              <li class="visitednum">{{coursestart.visitednum>10000?(((coursestart.visitednum-coursestart.visitednum%1000)/10000+'W')):(coursestart.visitednum)}}</li>
              <li class="praisedicon"><font-awesome-icon :icon="['far', 'thumbs-up']"></font-awesome-icon></li>
              <li class="praisednum">{{coursestart.praisednum>10000?(((coursestart.praisednum-coursestart.praisednum%1000)/10000+'W')):(coursestart.praisednum)}}</li>
            </ul>
          </div>
        </div>
      </li>
    </ul>
    <div style="font-size: 30px">{{ this.years }}年</div>
    <div style="height: 30px"></div>
    <ul class="course_type_list" >
      <li  v-for="courseing in courseends  ">
        <div class="box">
          <img src="../../assets/img/demo.png" alt="">
          <div class="info">
            <h4><a href="#">{{courseing.name}}</a></h4>
            <span class="duration">共{{ Math.abs(Math.ceil((Date.parse(courseing.end)-Date.parse(courseing.start))/1000/60/60/24/7)) }}周</span>
          </div>
          <div class="tinfo">
            <ul class="nav_horizontal">
              <li class="uimg">
                <img src="../../assets/img/demo.png" alt="">
              </li>
              <li class="username">{{courseing.teacher.nickname}}</li>
            </ul>
          </div>
          <hr>
          <div class="tinfo">
            <ul class="nav_horizontal">
              <li class="visitedicon"><font-awesome-icon :icon="['far', 'eye']"></font-awesome-icon></li>
              <li class="visitednum">{{courseing.visitednum>10000?(((courseing.visitednum-courseing.visitednum%1000)/10000+'W')):(courseing.visitednum)}}</li>
              <li class="praisedicon"><font-awesome-icon :icon="['far', 'thumbs-up']"></font-awesome-icon></li>
              <li class="praisednum">{{courseing.praisednum>10000?(((courseing.praisednum-courseing.praisednum%1000)/10000+'W')):(courseing.praisednum)}}</li>
            </ul>
          </div>
        </div>
      </li>
    </ul>

    <div style="font-size: 30px">{{ this.years-1 }}年</div>
    <div style="height: 30px"></div>

    <ul class="course_type_list" >
      <li  v-for="courseing in courseings  ">
        <div class="box">
          <img src="../../assets/img/demo.png" alt="">
          <div class="info">
            <h4><a href="#">{{courseing.name}}</a></h4>
            <span class="duration">共{{ Math.abs(Math.ceil((Date.parse(courseing.end)-Date.parse(courseing.start))/1000/60/60/24/7)) }}周</span>
          </div>
          <div class="tinfo">
            <ul class="nav_horizontal">
              <li class="uimg">
                <img src="../../assets/img/demo.png" alt="">
              </li>
              <li class="username">{{courseing.teacher.nickname}}</li>
            </ul>
          </div>
          <hr>
          <div class="tinfo">
            <ul class="nav_horizontal">
              <li class="visitedicon"><font-awesome-icon :icon="['far', 'eye']"></font-awesome-icon></li>
              <li class="visitednum">{{courseing.visitednum>10000?(((courseing.visitednum-courseing.visitednum%1000)/10000+'W')):(courseing.visitednum)}}</li>
              <li class="praisedicon"><font-awesome-icon :icon="['far', 'thumbs-up']"></font-awesome-icon></li>
              <li class="praisednum">{{courseing.praisednum>10000?(((courseing.praisednum-courseing.praisednum%1000)/10000+'W')):(courseing.praisednum)}}</li>
            </ul>
          </div>


        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  inject:['reload'],  //注入依赖
  data() {
    return {
      courses:[],
      coursetoday:[],
      courseings:[],
      courseends:[],
      time1:0,
      time2:0,
      years:''
    }
  },
  created() {
    //发送请求获取数据
    this.axios.get(this.baseUrl+"course/findcoursebytid")
      .then(res=>{
        this.courses = res.data.data;
        for (let i = 0; i < this.courses.length; i++) {
          if(Date.parse(this.courses[i].start)<=this.time1&& Date.parse(this.courses[i].start)>=this.time2){
            this.coursetoday.push(this.courses[i])
          }else if(Date.parse(this.courses[i].start)/(365*24*60*60*1000)+1970>this.years&&Date.parse(this.courses[i].start)/(365*24*60*60*1000)+1970<this.years+1){
            this.courseends.push(this.courses[i])
          }else if(Date.parse(this.courses[i].start)/(365*24*60*60*1000)+1970>this.years-1&&Date.parse(this.courses[i].start)/(365*24*60*60*1000)+1970<this.years){
            this.courseings.push(this.courses[i])
          }

        }
        let courselive=[];
        for (let i = 0; i < this.courses.length; i++) {
          if (this.courses[i].live==1){
            courselive.push(this.courses[i])
          }
        }
        this.$store.commit('setCoursestarts',this.coursestarts);
        this.$store.commit('setCourseings',this.courseings);
        this.$store.commit('setCourseends',this.courseends);
        this.$store.commit('setCourses',this.courses);
        this.$store.commit('setCourseslive',courselive);
      })
      this.time1=new Date()-(new Date()%(1000*60*60*24))+(24*60*60*1000);
      this.time2=new Date()-(new Date()%(1000*60*60*24))+(0*60*60*1000);
      this.years=Math.floor(new Date()/1000/60/60/24/365)+1970
    console.log(this.time1+'..............'+this.time2)
    console.log(new Date()*1)
  },
  methods:{
    coursecontinue(){

    },
    courselook(){

    },


  }
}
</script>

<style scoped>
@import "../../assets/css/course.css";
.nav_horizontal ul {
  list-style: none;
  margin-left: 50px;
}
.nav_horizontal li {
  display: inline;
}

 .el-header {
   background-color: #B3C0D1;
   color: #333;
   line-height: 60px;
 }

.el-aside {
  color: #333;
}

</style>
